<template>
  <view class="page">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @tap="goBack">
        <text class="fa fa-chevron-left fa-gray"></text>
      </view>
      <text class="nav-title">考试详情</text>
    </view>

    <!-- 内容区域 -->
    <scroll-view scroll-y class="content">
      <!-- 考试头部 -->
      <view class="exam-header">
        <view class="header-card">
          <view class="header-icon">
            <text class="fa fa-graduation-cap"></text>
          </view>
          <view class="header-info">
            <text class="header-title">住院医师规范化培训阶段考试</text>
            <text class="header-project">项目：住院医师规范化培训</text>
            <text class="header-time">2025.01.18 09:00 - 10:30</text>
          </view>
          <view class="header-status">
            <view class="status-badge status-ongoing">
              <text>进行中</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 考试信息 -->
      <view class="exam-info">
        <view class="info-card">
          <text class="info-title">考试信息</text>
          <view class="info-list">
            <view class="info-item">
              <text class="info-label">题目数量</text>
              <text class="info-value">80题</text>
            </view>
            <view class="info-item">
              <text class="info-label">及格分数</text>
              <text class="info-value">70分</text>
            </view>
            <view class="info-item">
              <text class="info-label">考试时长</text>
              <text class="info-value">限时90分钟</text>
            </view>
            <view class="info-item">
              <text class="info-label">考试类型</text>
              <text class="info-value">综合测试</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 考试须知 -->
      <view class="instructions">
        <view class="instruction-card">
          <view class="instruction-header">
            <text
              class="fa fa-info-circle"
              style="color: rgb(37 99 235)"
            ></text>
            <text class="instruction-title">考试须知</text>
          </view>
          <view class="instruction-list">
            <text class="instruction-item"
              >• 考试开始后不可暂停，请确保网络稳定</text
            >
            <text class="instruction-item"
              >• 答题过程中请勿切换应用或刷新页面</text
            >
            <text class="instruction-item">• 考试时间到后将自动提交试卷</text>
            <text class="instruction-item"
              >• 每题答案提交后不可修改，请仔细检查</text
            >
          </view>
        </view>
      </view>

      <view class="bottom-spacer"></view>
    </scroll-view>

    <!-- 底部按钮 -->
    <view class="action-bar">
      <view class="action-button" @tap="startExam">
        <text class="fa fa-play" style="margin-right: 8rpx; color: #fff"></text>
        <text class="button-text">开始考试</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
    };
  },
  onLoad() {
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0;
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    startExam() {
      uni.showModal({
        title: "开始考试",
        content: "确定要开始考试吗？考试开始后不可暂停。",
        confirmText: "开始",
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: "/pages/exam-paper/exam-paper",
            });
          }
        },
      });
    },
    goToHome() {
      uni.navigateTo({
        url: "/pages/home",
      });
    },
    goToProfile() {
      uni.navigateTo({
        url: "/pages/profile",
      });
    },
  },
};
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #f9fafb, #eff6ff);
  display: flex;
  flex-direction: column;
}

.nav-bar {
  height: 88rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nav-left {
  position: absolute;
  left: 32rpx;
}

.nav-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #111827;
}

.content {
  flex: 1;
  padding-bottom: 200rpx;
}

.exam-header {
  padding: 32rpx;
}

.header-card {
  background: #fff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #f3f4f6;
  display: flex;
  gap: 24rpx;
}

.header-icon {
  width: 128rpx;
  height: 128rpx;
  background: #f3e8ff;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64rpx;
  flex-shrink: 0;
}

.header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.header-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
  line-height: 1.4;
}

.header-project {
  font-size: 28rpx;
  color: #6b7280;
  margin-top: 8rpx;
}

.header-time {
  font-size: 28rpx;
  color: #9ca3af;
}

.header-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.status-badge {
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
  font-weight: 500;
}

.status-ongoing {
  background: #dcfce7;
  color: #15803d;
}

.exam-info {
  padding: 0 32rpx;
  /* margin-top: 32rpx; */
}

.info-card {
  background: #fff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #f3f4f6;
}

.info-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
  display: block;
  margin-bottom: 24rpx;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.info-label {
  font-size: 28rpx;
  color: #4b5563;
}

.info-value {
  font-size: 28rpx;
  font-weight: 500;
  color: #111827;
}

.instructions {
  padding: 0 32rpx;
  margin-top: 32rpx;
}

.instruction-card {
  background: #eff6ff;
  border-radius: 32rpx;
  padding: 32rpx;
  border: 1rpx solid #bfdbfe;
}

.instruction-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.instruction-icon {
  font-size: 32rpx;
  color: #2563eb;
}

.instruction-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #1e40af;
}

.instruction-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.instruction-item {
  font-size: 28rpx;
  color: #1e40af;
  line-height: 1.6;
  display: block;
}

.bottom-spacer {
  height: 80rpx;
}

.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 112rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20rpx);
  border-top: 1rpx solid #f3f4f6;
  padding: 24rpx 32rpx;
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
}

.action-button {
  /* width: 100%; */
  height: 88rpx;
  background: linear-gradient(to right, #16a34a, #10b981);
  border-radius: 24rpx;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(22, 163, 74, 0.3);
}

.button-icon {
  font-size: 32rpx;
  color: #fff;
}

.button-text {
  font-size: 32rpx;
  font-weight: 500;
  color: #fff;
}
.fa-graduation-cap {
  color: rgb(147 51 234);
}
</style>
